<!DOCTYPE html>
<html>
<head>
<title>豆瓣top250</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="" />
<script src="static/js/echarts.min.js"></script>
<script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>
<!-- Custom Theme files -->
<link href="static/css/bootstrap.css" type="text/css" rel="stylesheet" media="all">
<link href="static/css/style.css" type="text/css" rel="stylesheet" media="all">
<link rel="shortcut icon" href="static/bitbug_favicon.ico">
<!-- //Custom Theme files -->
<!-- js -->
<script src="static/js/jquery-1.11.1.min.js"></script>
<!-- //js -->
<!-- font-awesome icons -->
<link href="static/css/font-awesome.css" rel="stylesheet">
<!-- //font-awesome icons -->
<!-- start-smooth-scrolling-->
<script type="text/javascript" src="static/js/move-top.js"></script>
<script type="text/javascript" src="static/js/easing.js"></script>
<script type="text/javascript">
		jQuery(document).ready(function($) {
			$(".scroll").click(function(event){		
				event.preventDefault();
		
		$('html,body').animate({scrollTop:$(this.hash).offset().top},1000);
			});
		});
</script>
<!--//end-smooth-scrolling-->	
</head>
<body>
	<!--banner-->
	<div class="banner">
		<div class="header"><!--header-->
			<div class="container">		
				<nav class="navbar navbar-default" role="navigation">
					<div class="navbar-header">
						<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
							<span class="sr-only">Toggle navigation</span>
							<span class="icon-bar"></span>
							<span class="icon-bar"></span>
							<span class="icon-bar"></span>
						</button>
						<h1 class="navbar-brand"><a  href="/index">豆瓣top250</a></h1>
					</div>
					<div class="box">
						<div class="container-4">
							<form>
								<input type="search" id="search" placeholder="一个不能搜索的搜索框QwQ~" />
								<button class="icon"><i class="fa fa-search"></i></button>
							</form>
						</div>
					</div>
					<!--navbar-header-->
					<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
						<ul class="nav navbar-nav navbar-right cl-effect-4">
							<li><a href="/index">首页</a></li>
							<li><a href="/movie">电影</a></li>
							<li class="active"><a href="/score">评分</a></li>
							<li><a href="/word">词云</a></li>
                            <li><a href="/team">团队</a></li>
						</ul>	
						<div class="clearfix"> </div>	
					</div>
				</nav>
			</div>
		</div>
		<!--//header-->
		<!--banner-text-->
		<div class="banner-text">
			<h2>这是一个豆瓣top250<br>数据分析的一个网站 </h2>
			<a class="more hvr-bounce-to-right" target="_blank" href="static/images/5.jpg">获取更多</a>
		</div>
		<!--//banner-text-->
	</div>
	<!--//banner-->
	<!--banner-bottom-->
	<!--//banner-bottom-->
	<!--welcome-->
	<div class="welcome">
		<div class="container">
			<h3 class="title">评分分布图</h3>
			<div class="welcome-info">
				<h4></h4>
				<div class="welcome-row">
                    <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
                    <div id="main" style="width: 100%;height:400px;"></div>
					<div class="clearfix"> </div>
				</div>
			</div>
		</div>
	</div>

<div class="footer">
		<div class="container">
			<div class="footer-row">
				<div class="col-md-6 footer-logo">
					<h5><a href="index.html"> 豆瓣top250数据 </a></h5>
				</div>
				<div class="col-md-6 footer-nav">
					<ul>
						<li><a href="/index">首页</a></li>
						<li><a href="/movie" >电影</a></li>
						<li><a href="/score">评分</a></li>
						<li><a href="/word">词云</a></li>
						<li><a href="/team">团队</a></li>
					</ul>
				</div>
				<div class="clearfix"> </div>
			</div>
			<div class="footer-bottom">
				<div class="col-md-4 footer-grids">
					<p>当你仅有的一把工具是锤子，所有的东西看起来都像是钉子（When the only tool you have is a hammer, everything looks like a nail）</p>
					<h6>From<a  target="_blank" href="http://121.36.152.239/"> 博创空间</a> </h6>
				</div>
				<div class="col-md-4 footer-grids footer-mdl">
					<div class="col-md-6 grid-left">
						<ul>
							<li><a href="#"><i class="fa fa-angle-right"></i>富强</a></li>
							<li><a href="#"><i class="fa fa-angle-right"></i>民主</a></li>
							<li><a href="#"><i class="fa fa-angle-right"></i>文明</a></li>
							<li><a href="#"><i class="fa fa-angle-right"></i>和谐</a></li>
						</ul>
					</div>
					<div class="col-md-6 grid-left">
						<ul>
							<li><a href="#"><i class="fa fa-angle-right"></i>爱国</a></li>
							<li><a href="#"><i class="fa fa-angle-right"></i>敬业</a></li>
							<li><a href="#"><i class="fa fa-angle-right"></i>诚信</a></li>
							<li><a href="#"><i class="fa fa-angle-right"></i>友善</a></li>
						</ul>
					</div>
					<div class="clearfix"> </div>
				</div>
				<div class="col-md-4 footer-grids">
					<ul>
						<li class="phn"><i class="fa fa-phone"></i>15383568133</li>
						<li><a href="mailto:example@mail.com"><i class="fa fa-envelope-o"></i> 1119393564@qq.com</a></li>
					</ul>
					<p>Copyright &copy; 2020.博创空间.GNR.李梦奥。<br>----------------前端素材来源于<a target="_blank" href="http://sc.chinaz.com/moban/">&#x7F51;&#x9875;&#x6A21;&#x677F;</a></p>
				</div>
				<div class="clearfix"> </div>
			</div>
		</div>
	</div>
	<!--footer-->
	<!--smooth-scrolling-of-move-up-->
	<script type="text/javascript">
		$(document).ready(function() {
			/*
			var defaults = {
				containerID: 'toTop', // fading element id
				containerHoverID: 'toTopHover', // fading element hover id
				scrollSpeed: 1200,
				easingType: 'linear'
			};
			*/

			$().UItoTop({ easingType: 'easeOutQuart' });

		});
	</script>
	<a href="#" id="toTop" style="display: block;"> <span id="toTopHover" style="opacity: 1;"> </span></a>
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="static/js/bootstrap.js"></script>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));

        // 指定图表的配置项和数据
        var option = {
    color: ['#3398DB'],
    tooltip: {
        trigger: 'axis',
        axisPointer: {            // 坐标轴指示器，坐标轴触发有效
            type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
        }
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    xAxis: [
        {
            type: 'category',
            data: {{ score|tojson }},
            axisTick: {
                alignWithLabel: true
            }
        }
    ],
    yAxis: [
        {
            type: 'value'
        }
    ],
    series: [
        {
            name: '评分数',
            type: 'bar',
            barWidth: '60%',
            data: {{ num }}
        }
    ]
};

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script>
</body>
</html>